import React,{PureComponent} from 'react'
import {Button,StyleSheet,Text,TouchableOpacity, Image,View,Dimensions} from 'react-native'

const {width} = Dimensions.get('window')


type Props = {
    callBackSelectCourse:Function,
}


export default class SelectSegmentControl extends PureComponent<Props> {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity ref='good_course' style={styles.touch_select_opacity}
                                  onPress={() => this.selectGoodCourse()}>
                    <Text style={styles.touch_select_text} ref='good_text'>精品课</Text>
                </TouchableOpacity>
                <TouchableOpacity ref='open_course' style={styles.touch_un_select_opacity}
                                  onPress={() => this.selectOpenCourse()}>
                    <Text style={styles.touch_un_select_text} ref='open_text'>公开课</Text>
                </TouchableOpacity>
            </View>
        )
    }

    selectGoodCourse() {
        this.refs.good_course.setNativeProps({
            style: styles.touch_select_opacity,
        });
        this.refs.good_text.setNativeProps({
            style: styles.touch_select_text,
        });
        this.refs.open_course.setNativeProps({
            style: styles.touch_un_select_opacity,
        });
        this.refs.open_text.setNativeProps({
            style: styles.touch_un_select_text,
        });
        this.props.callBackSelectCourse(0)
    }

    selectOpenCourse() {
        this.refs.open_course.setNativeProps({
            style: styles.touch_select_opacity,
        });
        this.refs.open_text.setNativeProps({
            style: styles.touch_select_text,
        });
        this.refs.good_course.setNativeProps({
            style: styles.touch_un_select_opacity,
        });
        this.refs.good_text.setNativeProps({
            style: styles.touch_un_select_text,
        });
        this.props.callBackSelectCourse(width)
    }

}
const styles = StyleSheet.create({
    container:{
        alignItems:'center',
        flexDirection:'row',
        backgroundColor:'#2B3543',
        borderRadius:15,
        height:30,
        width:(width - 83 - 84),
    },
    touch_un_select_opacity:{
        width:(width - 83 - 84 - 9)/2,
        marginLeft:3,
        backgroundColor:'#252E3B',
        height:25,
        borderRadius:12.5,
        borderWidth:1,
        borderColor:'#353D49',
        alignItems:'center',
        justifyContent:'center',
    },
    touch_un_select_text:{
      color:'rgba(255,255,255,0.5)',
        fontSize:11,
    },
    touch_select_opacity:{
        width:(width - 83 - 84 - 9)/2,
        marginLeft:3,
        backgroundColor:'#B85259',
        height:25,
        borderRadius:12.5,
        borderWidth:1,
        borderColor:'#FF4967',
        alignItems:'center',
        justifyContent:'center',
    },
    touch_select_text:{
        color:'#FFFFFF',
        fontSize:11,
    },
})